<template>
  <el-container class="adminbg">
    <el-header class="admin-header">
      <Vheader @logout="logout"></Vheader>
    </el-header>
    <el-main class="admin-main">
      <transition :name="transitionName">
      <router-view/>
      </transition>
    </el-main>
    <el-footer class="admin-footer">
      <Vfooter></Vfooter>
    </el-footer>
  </el-container>
</template>

<script>
import Vheader from '@/components/Vheader.vue'
import Vfooter from '@/components/Vfooter.vue'
export default {
  created(){
    this.autoLogin();
    // this.websocketFun();
  },
  components:{
    Vheader,
    Vfooter
  },
  data(){
    return {
      transitionName:'slide-right',
    }
  },
  methods:{
    autoLogin(){
      let accessToken = this.$cookies.get('accessToken');
      if(!accessToken){
        this.$router.push('/login')
      }
    },
    // websocketFun(){
    //   var that = this;
    //   var socket;
    //   var accessToken = this.$cookies.get('accessToken');
    //   if(typeof(WebSocket) == "undefined") {
    //         console.log("您的浏览器不支持WebSocket");
    //     }else{
    //         console.log("您的浏览器支持WebSocket");
    //         //实现化WebSocket对象，指定要连接的服务器地址与端口  建立连接
    //         let socketUrl = "ws://zgh.zg-weilaijia.com/webSocket/"+accessToken;
    //         socket = new WebSocket(socketUrl);
    //         //打开事件
    //         socket.onopen = function() {
    //             // console.log("Socket 已打开");
    //             //socket.send("这是来自客户端的消息" + location.href + new Date());
    //         };
    //         //获得消息事件
    //         socket.onmessage = function(msg) {
    //           console.log(msg.data);
    //             if(msg.data != 'success'){
    //               that.$notify({
    //               title: '订单消息',
    //               message: msg.data,
    //               duration: 0,
    //               position: 'bottom-right',
    //               type: 'success'
    //             });
    //             } 
    //         };
    //         //关闭事件
    //         socket.onclose = function() {
    //             // console.log("Socket已关闭");
    //         };
    //         //发生了错误事件
    //         socket.onerror = function() {
    //             alert("Socket发生了错误");
    //             //此时可以尝试刷新页面
    //         }
    //         //离开页面时，关闭socket
    //         //jquery1.8中已经被废弃，3.0中已经移除
    //         // $(window).unload(function(){
    //         //     socket.close();
    //         //});
    //     }
    // },
    logout(){
      this.$cookies.remove('accessToken');
    }
  },
  watch: {
    '$route' (to, from) {
      // console.log(`to meta`);
      // console.log(to.meta);
      // console.log(`from meta`);
      // console.log(from.meta)
      let toIndex = to.meta.transitionKey
      let fromIndex = from.meta.transitionKey
      this.transitionName = toIndex < fromIndex ? 'slide-right' : 'slide-left'
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/assets/style/style.scss";
.adminbg{
  background: #f7f7f7;
}
.admin-header,.admin-footer{
  padding: 0;
}
.admin-main{
  width: 100%;
  overflow-x: hidden;
}
</style>
